<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片点击全屏</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            background-color: #dcdde1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            overflow-x: hidden;
        }
        #select{
            display: none;
        }
        .card{
            width: 400px;
            height: 600px;
            background-color: #ffffff;
            box-shadow: 0 0 50px 10px rgba(0, 0, 0, .3);
            transition: all .6s;
            text-align: center;
        }
        .img{
            width: 400px;
            height: 230px;
            background: url('https://picsum.photos/1920/1080?1') no-repeat center center;
            background-size: cover;
            transition: all .6s;
        }
        .title{
            font-size: 30px;
            color: rgb(88, 88, 88);
            margin: 30px 0 15px 0;
            transition: all .6s;
            transition-delay: .2s;
        }
        .desc{
            width: 400px;
            margin-bottom: 20px;
            padding: 0 30px;
            line-height: 25px;
            opacity: 1;
            color: rgb(170, 170, 170);
        }
        .content{
            display: none;
            height: 1300px;
            text-align: center;
            padding: 0 20%;
            line-height: 40px;
            background-color: #ffffff;
        }
        .content p{
            margin: 30px 0;
            text-align: left;
            display: table;
        }
        .icon{
            width: 300px;
            font-size: 22px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .icon i{
            margin: 10px;
            font-size: 22px;
            color: rgb(75, 75, 75);
        }
        /* 点击放大 */
        #select_lable{
            display: block;
            position: absolute;
            width: 400px;
            height: 600px;
            z-index: 999;
        }
        #select:checked~.card #select_lable{
            width: 100vw;
            height: 100vh;
        }
        #select:checked~.card{
            width: 100vw;
            height: 100vh;
        }
        #select:checked~.card .img{
            width: 100vw;
            height: 650px;
            overflow: hidden;
        }
        #select:checked~.card .title{
            transform: translateY(-400px);
            color: #ffffff;
            font-size: 70px;
        }
        #select:checked~.card .desc{
            display: none;
            opacity: 0;
        }
        #select:checked~.card .icon{
            display: none;
        }
        #select:checked~.card .content{
            display: block;
            transform: translateY(-50px);
            animation: content 2s;
        }
        @keyframes content{
            from{
                opacity: 0;
                transform: translateY(0px);
            }
            to{
                opacity: 1;
                transform: translateY(-50px);
            }
        }
    </style>
</head>
<body>
    <input type="checkbox"name="" id="select" >
    <div class="card">
        <label for="select" id="select_lable"></label>
        <div class="img"></div>
        <h2 class="title">当归四逆汤证</h2>
        <p class="desc">
            11.60条哦，这一条呢，也说不上是好转，也说不上是恶化，只是在讲这个病，它的一个转法。那当然这种条文我相信上完之后啊，回家同学就会忘光光了哦，因为它的整个故事情节是很冷僻的啦。除非你刚好在家里病到一模一样的，不然的话很难记得住嘛，比较容易记得住的条文都是有方子的。那么这种我们也只能看看啦，试着读取一下张仲景的用心。
        </p>
        <div class="content">
            <p>他说“伤寒，热少，微厥”，我们前面讲到厥阴病有这个厥热胜复的现象嘛，是不是，那当然都是厥生热亦生，就发冷的时候越凶猛的话，他发热的时候也会越凶猛。可是这个地方他说“热少，微厥”，意思就是这个厥阴病哦，他本身厥阴的调性并不明显，发烧的时候不很烧，发冷的时候也不很冷。那么这个人他的阴阳分裂的状态到底有多严重呢？他后面一句写说“指头寒”。这个人的手脚哦，没有这样一整段都冰冷下来，没有到四肢厥逆，他只是手指头发冷。虽然说有阴阳脱离的状态哦，可是还真的不怎么严重。</p>
            <p>然后呢，你看他的症状呢，给你讲这个“嘿嘿不欲食”，这个“嘿嘿”念“默默”嘛。那么，嘿嘿不欲食这样一个陈述是不是就会让我们很直接的联想到是少阳病呢，对不对？所以我想历代研究《伤寒论》的人也会从这一类的条文里得到一个推论，就觉得说厥阴病啊，这个阴阳分裂的调性，如果不严重的话，其实就很容易合并成一个近似于少阳的状态哦，这样的一种观点。</p>
            <p>当然，我们平常哦，临床的麻烦是，这个张仲景说的这么清楚的厥热胜复哦，我们几时也见不到一次。所以呢，对于这些条文，好像张仲景用力的地方，我们读起来就有一点没力哦。因为我们平常厥阴病如果是一般感冒的话，最主轴是经过这个当归四逆汤证了。那么如果说通常都是这样医的话，我想这些条文大家就会感觉到有一点没感觉。</p>
            <p>那么他说这个“烦躁”哦，那么这边也不用太细细去考究，主要是讲这个人比较偏热一点哦。就是他的厥阴不明显，因此合并成了一个少阳的调调。而合并成少阳的调调，这个人也是体质上来讲有些热哦，所以他比较烦躁一点。那么我们从他的这个第一小段的陈述，看到他厥阴病开始跟少阳有一种暧昧地带。那么接下来你就要看他之后的转归，有哪两种可能哦。</p>
            <p>那第一个可能就是，他原来体质是偏热的，可是过了几天之后呢，他渐渐渐渐那个热啊，也自己清掉了。所以过了几天他说“小便利，色白者，此热除也”，就是他的热已经没有了。那么当然如果你是小便不利而色白，那这样子比较是少阴病了哦，你还是要救他的肾脏。可是这边就讲说小便也好好的，也不太黄，那你看得出这个人体内已经没什么热了</p>
            <div class="icon">
                <i class="fa fa-bookmark"></i>
                <i class="fa fa-facebook-official"></i>
                <i class="fa fa-twitter"></i>
                <i class="fa fa-instagram"></i>
            </div>
        </div>
    </div>
</body>
</html>